Advanced CSS3 and HTML5

Introduction

Is advanced Web design art, or is it technology? The answer is: It's both.

I find it helpful to invoke the metaphor of a sculptor. If the sculptor doesn't understand the technology and technique for working with the material (such as metal, wood, or clay), then no matter how creative his or her artistic vision is, the sculpture will collapse.

In that spirit, we'll combine design and technology in this lesson. We'll start by defining and applying a color scheme to our website, and then we'll get technical.

In Lesson 1, I emphasized the importance of shopping for a remote Web hosting server. In this lesson, we'll explore the options for remote hosting, contract for a (free) hosting service, and upload our sites.

But before posting, we need to make sure our websites are ready for the world. That means, among other things:

• Validating code for errors
• Testing all the links
• Checking spelling
• Evaluating for accessibility—how easy it is for people with disabilities to access our site
• Testing for browser issues

Are all these little tasks important? Yes. Carefully testing your site before uploading helps you to make it inviting, impressive, and professional. And, to get negative for a moment, any of these things can severely undermine the impact of even a well-designed site that has appealing content:

• A misspelled word on your home page
• A bad link to your "About Us!" page
• An HTML error message that pops up in a browser
• Links that are inaccessible to folks who can't use a mouse, either because of their system environment (like a mobile device) or because of physical limitations

Of course, as you create page content, you check for mistakes. You test pages in a browser on your local computer before uploading them. But as websites grow to dozens, hundreds, or thousands of pages, you need to rely on more systematic testing techniques—and I'll show you how to do that.

Shopping for remote server providers is also a part of advanced Web design. You don't want to contract with a hosting service that won't provide all the features you need. We'll walk through what those are and how to make sure your host supports them. Then I'll show you how to use file management tools to upload your site.

We have a lot to cover today, so let's get started by talking about color schemes.

Defining and Applying a Color Scheme

Website color schemes are composed of five colors. Why do Web designers, who rarely agree on anything, agree on this? It's because you need five colors to distinguish different elements of your pages: banners, sidebars, text color, and so on. Generally, anything less than five colors makes your site look dull.

Why not use eight or nine colors, then? Constraining yourself to five colors gives your site a coherent theme. If there are more than five colors in your site design, visitors are overwhelmed with a cacophony of color. The site feels noisy and cluttered.

Tip

In Web design, black, white, and shades of gray or dark blue generally don't count. You can use them on top of and in addition to the colors in your color scheme.

I won't try to cram a color theory course into this short chapter, but here's the basic idea: Color schemes can be either complementary or harmonious.

Complementary color schemes involve mixing "opposite" colors from the standard color wheel. For example, you might build a color scheme around blue and orange, or you might prefer yellow and purple.

Complementary (opposite) colors on the color wheel

Here's a Web page that effectively uses complementary colors:

A website color scheme based
on complementary colors

Another approach is to build harmonious color schemes around gradations of a color. For example, yellow, green, and blue are next to each other on the color wheel. You might build an effective color scheme based on gradations of those colors (like lime green and aqua).

Harmonious colors on the color wheel

And here's an example of how a harmonious color scheme can look:

Website with a harmonious color scheme

You can find many tools for generating color schemes online. The most powerful is Adobe's Kuler site. Kuler has been renamed Adobe Color CC since I wrote this lesson, but all the steps that follow work the same in the renamed "Color"-- just as they did in "Kuler." It's free (although additional features are available if you're using Adobe products). As part of your homework assignment, I'm going to have you create and apply a color scheme with Kuler. Let me walk you through that process now.

By the way, you'll notice in this lesson and in future lessons that I've included some live links that open in a new page. I wouldn't normally do this because it can be distracting, but I want you to be able to switch back and forth easily between our classroom and the sites you'll be working with. 

To create a color scheme in Kuler, follow these steps:

1. In a browser, go to https://kuler.adobe.com. If you haven't used this site before, you'll need to create an account. If that's the case, click Sign Up, and follow the instructions.
2. You can search Kuler's massive set of color schemes for one you like, or you can create your own. Let's start with the search option. Click Explore, and then go to the search box. In that box, type the name of a color (like orange). You can also search by concept (like "happy" or "scary").

Orange-based color schemes at Kuler

3. To define your own color scheme, click the Create link (it's under the search box).
4. In the new window that opens, Kuler lets you create from a color wheel or from an image. The From an Image option is valuable for designers; you can upload an image, and Kuler will extract color scheme options from it. With the image uploaded, you can move any of the five small circles over different parts of the image to extract a color for your color scheme.

Color schemes based on an image

5. To define a color scheme from a color, click the different areas of the color wheel.

Defining colors for a color scheme

6. Drag circles on the color wheel to adjust the color scheme. Play with this feature a bit, and you'll discover some intuitive features. For instance, dragging one color adjusts the rest of the colors.

7. Dragging colors toward the center of the color wheel creates muted (less bright) colors.

Muting colors in a color scheme

8. Finally, if you're comfortable defining colors with HSV, RGB, CMYK, LAB, or hexadecimal color codes, you can enter those values directly below any color swatch to apply a specific color to a swatch digitally.

HSV? RGB?

When designers talk about value, they mean the lightness or darkness of a color. There are all kinds of ways to classify color values. HSV organizes them by hue (color), saturation (intensity), and value (brightness). RGB defines values by the amount of red, green, and blue in the mix. LAB defines by light, and then by A and B values that determine color. CMYK stands for cyan, magenta, yellow, and black, and it's a system for print colors rather than Web colors.

Hexadecimal color codes are the standard ones for Web design. A hexadecimal system has 16 digits rather than 10; usually, they're the digits 0 through 9 and the letters A through F. We'll retrieve our hexadecimal values when we insert our color scheme into our style sheet.

The image below shows how you can use RGB color values to define pure red: You assign a value of 255 to the Red channel, zero to the Green, and zero to the Blue. Changing the values will change the color.

Defining the color red
using RGB color values

9. Now it's time to save the five hexadecimal values for our color scheme. If we were using an Adobe product or wanted to register with Kuler, we could automatically generate a set of color values. But even without doing that, we can simply copy and paste the five hexadecimal values into a comment in our CSS file. One by one, copy each hexadecimal value into your clipboard.

Copying a hexadecimal color value

10. Then paste those values into a comment in the CSS style sheet file in your code editor. Your comment code should look something like this (except, of course, that your values will be different):
    /* Color scheme hexadecimal values: FFE8DF 8F92B2 F9F9FF BBCCB3 99B28B */

A comment in a CSS file with hexadecimal color values

Let's use what you've just learned to spice up the page we created in Lesson 2.

Applying a Color Scheme

Now that we've pasted our color scheme hexadecimal values into a comment in our style sheet, we can replace the rather generic shades of gray in the page we created in the previous lesson with our own colors.

For handy reference, here's the HTML file we're using:

<!DOCTYPE HTML>
<!--All page content is inside the HTML element-->
<html>
<!--Head element content is not visible in a browser window-->
<head>
<!--The UTF-8 character set provides the most support for all symbols and characters-->
<meta charset="UTF-8">
<title>HTML Template</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<!--Content visible in the browser's window is inside the HTML element-->
<body>
<!--All our content is enclosed in the wrapper ID style-->
<div id="wrapper">
<!--The banner ID style is inside the wrapper ID style-->
	<div id="banner">
		<h1>Website for [your class nickname]</h1>
	</div>
<!--left-column ID style is floated left and used for navigation-->
	<div id="left-column">
		<h3>Links...</h3>
		<ul>
		<li> <a href="http://www.w3schools.com/">Reference: W3Schools</a></li>
		<li> <a href="feedback.html">Feedback Form</a></li>
		<li> <a href="video.html">Video</a></li>
		</ul>
<!--right-column ID style is floated right and used for content-->
	</div>
	<div id="right-column">
		<h2>Right Column Heading Here </h2>
		<p>Right column content here </p>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
			<div class="box"><p>Box content</p></div>
	</div>
<!--The clear class style clears (removes) float-->
	<div class="clear"></div>
	<div id="footer">
		<h5>Site by [your class nickname]</h5>
	</div>
</div>
</body>
</html>

And here's the CSS style sheet we used:

@charset "UTF-8";
/* CSS Document */

/* Color scheme hexadecimal values: [paste your values here] */

/* The body tag style applies to all elements on the page */
body {
background-color: black;
font-family: Verdana, Geneva, Arial, sans-serif;
padding:0px;
margin:0px;
}

/* The wrapper ID style is used with a div tag to provide a 960px wide page */
#wrapper {
width: 960px;
height: 800px;
margin-left: auto;
margin-right: auto;
background-color:LightSlateGrey ;
}

/* The right-column ID style is floated right */
#right-column {
float: right;
width: 600px;
height: 600px;
background-color:LightGray;
}

/* The left-column ID style is floated left */
#left-column {
float: left;
width: 360px;
background-color:silver;
height:600px;
}

/* Defining a style for a set of tags separated by commas applies the style to all tags */ 
h1,h2,h3,h4,h5,h6,p,li { 
margin-left:15px; 
margin-top:0px; 
margin-bottom:0px;
}

#footer {
height:80px;
}

#banner{
height:120px;
background-color:SlateGrey;
}

/* Defining a style for a set of tags not separated by commas applies the style only to all tags within the preceding tag*/
#banner h1 {
color: white;
}

/* Advanced Web design relies on class or ID styles, never tables */
.box {
height: 150px;
width: 150px;
float: left;
background-color:tan;
margin: 15px;
opacity:.5;
}

/* The following pseudo-class applies to the box class when in a hovered state */
.box:hover {
background-color:white;
opacity:1;
}

/* This clear class style terminates float */
.clear{ 
clear: both; 
}

See the comment within the code that says [paste your values here]? That's the spot where you should replace the placeholder colors in the template with colors from your color scheme. To do that, place a pound symbol (#) in front of the hexadecimal value.

Here's an example of a custom color applied to the body element called background color:

body {

background-color: #BBCCB3;

font-family: Verdana, Geneva, Arial, sans-serif;

padding:0px;

margin:0px;

}

Experiment with a variety of color values from your color scheme in different elements.

We've Talked About Style, But What About Content?

Feel free to experiment with a bit of your own content in our HTML template. If you're comfortable with HTML text and images, you can customize our content now. Or you can just leave the placeholder text alone and focus on the techniques we're covering. Then later, at your leisure, you can experiment with customizing the content.

Once you've decided on the colors you'll use, you can start testing your site and fixing problems in it. Please join me in Chapter 3 to find out how.

Testing and Troubleshooting Your Site

Our site's almost ready to upload to the Web—but first we should test and troubleshoot it.

The most basic and important way to test a Web page is to save it in your code editor and open it with a browser (using File > Open or the equivalent in your browser menu). Beyond that, valuable online tools can validate (test) your code, your links, and the accessibility of your site.

Validating Your Code and Links

What if you open your Web page in a browser, and it doesn't look like it's supposed to? The problem could be an error in your HTML or CSS code. To troubleshoot, use an online validation system to identify errors.

To test HTML code, follow these steps:

1. Open http://validator.w3.org/ in your browser. You'll see the markup validation service that the World Wide Web Consortium (W3C) provides. The W3C sets international standards for the Web.

Choosing to validate code by direct input

2. Click the Validate by Direct Input tab at the top of the page. Doing this allows you to test code before you upload it. Since we include a doctype declaration in our file, you don't need to expand the More Options triangle that appears near the middle of the page.
3. Copy and paste your HTML into the Enter the Markup to validate box, and click the button that says Check.
4. If there are no errors in your code, you'll see a message confirming that. Sometimes this message includes a "Notes and Potential Issues" list that identifies potential compatibility issues that aren't critical.

Validated code

5. If there are errors in the code, you can click the Validation Output tab to see a list of them, along with hints on how to fix those errors.

Viewing HTML errors

Testing CSS Code

You can test CSS code the same way we just tested HTML code, but you'll use a different Web page at W3C. To test CSS, go to http://jigsaw.w3.org/css-validator/.

Just as we did with HTML, click the By Direct Input tab, and paste your CSS code into the box. Then click the Check button. The results will be either a Congratulations message or a list of errors with advice on how to fix them.

Viewing CSS errors

The W3C code validator tools for HTML and CSS are the secret weapons of every professional coder. Now that you know about these resources, you can save countless hours of troubleshooting trauma!  

Why didn't anyone tell you about these earlier? As I say, they're the secret weapons of every professional coder . . . but now that's you.

Checking Links

W3C also provides a link-testing page, but it works only after you upload your site. So bookmark this page now, and use it later: http://validator.w3.org/checklink.

Link validation takes time because the validator searches your entire site and tries every link. When testing is complete, you can click the Go to the results link to see a list of errors. The link validator provides detailed explanations of what the problems are and how you can fix them.

Results of testing links

Now let's move on to a topic that seems minor but is actually important.

Checking Your Spelling

Misspelled words doom a website. They send a message that your message isn't worth taking seriously. And since I can't spell worth a darn, that's a big problem for me. Even if you're an excellent speller, it's a wise move to check your spelling before posting a site.

Many code editors include spell-checking for regular text. TextWrangler (my first choice for Mac) includes spell-checking, and plug-ins are available that add spell-checking to Notepad++ for Windows. Squiggly red underlining appears under suspected spelling errors, and you can view corrections by right-clicking (or CTRL + clicking on a Mac) on the underlined words.

Identifying and correcting spelling errors in TextWrangler

Will your website work for everyone who accesses it? Find out by using WAVE.

WAVE stands for Web Accessibility eValuation Tool. That site tests pages for accessibility. For example, will your website work well for hearing-impaired or sight-impaired people? Will color-blind people be able to comprehend the content? Will people with motor disabilities be able to navigate the pages?

To test your page in WAVE, go to http://wave.webaim.org/. The site works for uploaded pages only, so bookmark this link as well for future reference.

When you enter a URL in the WAVE site, you see an annotated version of the URL. WAVE identifies accessibility problems, and it highlights features that make a page more accessible. One of the most important accessibility features is proper use of ALT properties with images. Alt property values are short text strings that describe the image. Spaces, uppercase and lowercase characters, and special characters (like "&" or "!") are fine. Alt properties describe content to users who have limited vision.

Identifying a helpful ALT tag

Before we move on, try a game of Hangman to help you remember some of the terms in this chapter.

Ready to set up your remote hosting server? Please join me in Chapter 4.

Obtaining a Remote Hosting Server and Domain Name

Web hosting servers are computers that have massive capacity to store files, but not every computer with massive capacity is a Web hosting server. These servers include features that allow users to interact with your site—to watch video, for instance, or to post data in forms.

Some hosting packages limit how much content you can store at the site and how much bandwidth you can use. Making the right choices in hosting plans is a lot like choosing a good cellphone plan: You don't want to get socked with huge overage charges because you uploaded too much content or used too much bandwidth. So let's talk about your options.

The owners of hosting sites usually measure content in file size. You can use your operating system's file manager (like Windows Explorer or Finder on a Mac) to total the size of the files in the folder you've created for your Web pages. Based on that, you can get a sense of how much space you need.

Bandwidth is more complicated to measure and anticipate because it measures how much data transfers to and from your site. So if you have a video that has a small file size, but 100 million people download it, you're going to use a lot of bandwidth.

When in doubt, consult the staff at the hosting service to see what level of service is appropriate for your current and future needs.

Acquiring a Domain Name

When you buy a Web hosting service, the provider will set you up with an Internet Protocol (IP) address. But you'll want to connect that IP address to a domain name.

Domain names like cnn.com send users to a specific IP address. For example, the IP address for CNN is 157.166.226.26. Try it! Paste 157.166.226.26 into the address bar of any browser, and press RETURN or ENTER. You'll end up at CNN's site. But for obvious reasons, CNN (and everyone else) needs a domain name that's easier to remember than an IP address is.

To find out if a domain name is available, you can go to a domain registrar such as Network Solutions (http://www.networksolutions.com) or Instant Domain Search, a free service that checks availability of domain names (http://instantdomainsearch.com/). Enter the domain name you want in the search box at the site. You'll see a result like this:

Checking to see if a domain name is available

Network Solutions will offer to sell you an open domain name as soon as you find it. But don't buy it!

In many cases, when you sign up for a year or some other fixed period with a Web hosting company, they'll throw in free domain name registration. It's kind of like those free one-hour training sessions they package with a one-year membership at a gym. So use Network Solutions or a similar site to find available domain names . . . but then find a Web hosting package that registers the name for you at no additional charge.

The other advantage of registering your domain name as part of a package for Web hosting is that connecting your domain name with an IP address can be confusing. Rather than mess with that, let your hosting service handle the domain name registration for you as part of the sign-up deal.

Uploading Your Site

Now that we've surveyed the concepts involved in signing up for a Web hosting service, it's time for you to do this for real. In preparing the materials for this course, I tested a number of free Web hosting deals, and I found one that seems attractive. It includes a package that manages file transfers, which we'll explore in the next chapter. The host is 000webhost.com, with the first three numbers—zero, zero, zero—denoting the cost of hosting.

What's this company's hustle? It's pretty reasonable: The free service is restricted to limited server space and limited data transfer (what I referred to as bandwidth earlier), and you don't get free domain name registration with the free package. You also get limited email options and a simpler, less-friendly FTP program.

Without the free domain name registration, you'll probably end up with a domain name that includes the name of your hosting service—for example, http://yourname.hostingservicename.net/.

What if you already have an account with 000webhost? You can create a subdomain for your work in this course. That way you won't have to worry about mixing up your coursework for this class with other projects you've worked on.

Signing Up, Step by Step

To create a site for yourself, follow these steps:

1. In a browser, navigate to http://www.000webhost.com/.
2. Survey the free and paid hosting options. Again, I strongly suggest that you start with a free site. You can upgrade later, either here or at another hosting service. Sign up for a free site by clicking Order Now at the bottom of the Free Hosting set of options (see below).

Surveying Web hosting options at 000webhost.com

3. The registration process requires only an email address—no credit card information is necessary. When you're done, you'll get an email telling you how to log into your account. Use the login information to enter your account at 000webhost.com, and navigate to the Go to CPanel. "Cpanel" is short for "Control Panel." Every hosting service provides one as part of the hosting package, and you use it to edit your website settings.

Finding the link to the CPanel

4. Near the top of the CPanel, click the View Account Details icon.

Navigating to account details at 000webhost.com

5. You might want to note four essential pieces of information: your new URL, your FTP address, your username, and your password. If you use a program like Dreamweaver or a file transfer protocol (FTP) client to transfer files, you'll need that information.
6. To upload files, click the Members Area link on the site home page, and log into your account at 000webhost.com. After you log in, navigate to the CPanel page. In the Files section of the CPanel, click the File Manager icon.

Opening the File Manager

7. When the file manager page opens, click the Public folder.

Opening the public_html folder

8. After you navigate to the public_html folder, you'll see all the files in your site. Click the check box next to the default.php file. This is the home page provided by 000webhost until you create your home page. (The .php filename extension is an alternate way of naming files that permits them to display data from an online database.) With default.php selected, click the Delete button that's above the top row of files in the File Manager.

Deleting the default home page

9. To upload files to your new remote site, click the Upload button in the File Manager. An Upload Files and Archives page opens. Use the Browse and Add other buttons repeatedly to add all your local site files to the queue of files to be uploaded. When all your files are queued up, click the Submit button (a green check mark) to upload the files to your remote site.

Uploading files to a 000webhost.com server

After the File Manager is done, the page displays a status report on the upload process. For example, you might see a message like this: "Checking files: File index.html is OK."

After the pages upload, go check out your site online!

If you uploaded your index.html page and deleted the default.php file provided by 000webhost.com, then your site should now be online and accessible. Spend some time navigating it, enjoying it, tweeting friends and relatives about it, and so on.

Inspecting an uploaded site

Congratulations! Now let's move on to Chapter 5, where we can review what you learned today.

Summary

In this lesson, we ranged from the artistic to the technical side of advanced Web design. And I'm glad we were able to do that in a single lesson, because aside from the specific techniques we covered, the experience gave you a feel for the back-and-forth between design and technology.

Some of us are more inclined to the coding side of Web design. Others of us are more attracted to the design side. But to be a successful Web designer today, you need to be at least conversant with both sides of the aisle.

If you're a coder by nature, you should understand something about the process of creating a color scheme. If you're a designer, you'll want to understand what's going on with coding—including how to apply a color scheme to a style sheet and how to test and troubleshoot code. And all of us benefit from an overview of how design and technique interact in advanced Web design.

Don't forget that you still have a quiz to complete for this lesson. I've also provided some helpful information in the Supplementary Material section and the FAQs. And you can always talk with me in the Discussion Area.

In our next lesson, I'll explain how to make your new site more attractive. We'll talk about the design side of things (creating a distinctive look through gradient backgrounds and custom fonts) and the coding side (using CSS3-based techniques to implement design features without increasing download time). See you in Lesson 4!